<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 147px;
            height: 60px;
            background: #f6f7f9;
            border: 2px solid #000;
            border-style: double;
        }
        .d2 {
            width: 147px;
            height: 60px;
            background: #f6f7f9;
            border-left-width: 1px;
            border-left-style: double;
            border-left-color: red;
            border-right-width: 2px;
            border-right-style: dashed;
            border-right-color: green;
            border-top-width: 3px;
            border-top-style: solid;
            border-top-color: orange;
            border-bottom-width: 4px;
            border-bottom-style: dashed;
            border-bottom-color: blue;
        }

        .d3 {
            width: 147px;
            height: 60px;
            background: gray;
            border: 20px solid red;
            border-left-color: green;
            border-top-color: pink;
            border-right-color: blue;
            border-bottom-color: orange;
        }
    </style>
</head>
<body>
    <!-- 
    复合属性 border, 包含边框粗细、样式、颜色。是 border-width, border-style, border-color 组合
    
    d1 其中，样式取值为 solid实心，dashed虚线
    
    d2 可以提供一部分边框, 例如：border-left, border-left-width, border-left-style, border-left-color.
    
    d3 展示border实际上是三角的
    -->
    <div class="d1">舞蹈</div>
    <hr>
    <div class="d2">唱歌</div>
    <hr>
    <div class="d3">喝酒</div>
</body>
</html>